// 作者：徐斐然

require('../common/style.css')
require('../common/header/index.css');
require('../common/nav-simple/index.css');
require('./index.css');

var _common_util = require('util/common_util.js');
require('../common/nav-simple/index.js');
require('../common/header/index.js');
var $ = require('jquery');
var _const = require('root/const');
var _good_service = require('service/good_service');
const _carousel_service = require('../../service/cart_service');

var page = {

  init: function (id) {
    this.renderHtml(id);
    this.bindEvent();
  },

  renderHtml: function (id) {
    var that = this;
    _good_service.detail(
      id,
      function (data, msg) {
        that.renderHead(data);
        that.renderBody(data);

        _good_service.similar(
          data.id,

          function (data, msg) {
            that.renderSimilar(data);
          },

          function (data, msg) {}
        );
      },
      function (data, msg) {}
    );
  },

  bindEvent : function () {
    this.bindImagePannelEvent();
    this.bindGoodItemsEvent();
    this.bindCountEvent();
    this.bindCartEvent();
  },

  renderHead : function (data) {
    var subImages = eval(data.subImages);
    var subImagesLen = subImages.length;
    var subImageTemplateHtml = $("<div><div><img class='small-sub-image'></div></div>");
    $('.big-sub-image').attr('src', _const.good_image_prefix + subImages[0]);
    for (let i = 0; i < subImagesLen; i++) {
      subImageTemplateHtml.find('.small-sub-image').attr('src', _const.good_image_prefix + subImages[i]);
      $('.small-sub-image-pannel').html($('.small-sub-image-pannel').html() + subImageTemplateHtml.html());
    }

    $('.small-sub-image-pannel').slick({
      centerMode: true,
      centerPadding: '5px',
      slidesToShow: 3,
      dots: true,
      focusOnSelect: true,
    });
    $('.spu-wrapper .name').text(data.name);
    $('.spu-wrapper .summary').text(data.subtitle);
    $('.spu-wrapper .price').text('￥' + (parseFloat(data.price) / 100).toFixed(2));
  },

  renderBody : function (data) {
    var goodDetailImages = eval(data.detail);
    var detailImageLen = goodDetailImages.length;
    var detailImageTemplateHtml = $("<div><div><img class='good-detail-image'></div></div>");
    for (let i = 0; i < detailImageLen; i++) {
      detailImageTemplateHtml.find('.good-detail-image').attr('src', _const.good_image_prefix + goodDetailImages[i]);
      $('.addition-good-detail-wrapper').html($('.addition-good-detail-wrapper').html() + detailImageTemplateHtml.html());
    }
  },

  renderSimilar : function (data) {
    var similarImageTemplateHtml = $("<div><div class='good-item'>" +
              "<div class='good-img-wrapper'><img class='good-img'></div>" +
              "<div class='goot-info'>" +
              "<p class='good-name'></p>" +
              "<p class='good-price'></p>" +
              "</div>" +
              "</div></div>");
    var similarLen = data.length;
    for (let i = 0; i < similarLen; i++) {
      similarImageTemplateHtml.find('.good-img').attr('src', _const.good_image_prefix + data[i].mainImage);
      similarImageTemplateHtml.find('.good-item').attr('data-src', 'detail.html?id=' + data[i].id);
      similarImageTemplateHtml.find('.good-name').text(data[i].name);
      similarImageTemplateHtml.find('.good-price').text('￥' + (parseFloat(data[i].price) / 100).toFixed(2));
      $('.similar-good-wrapper').html($('.similar-good-wrapper').html() + similarImageTemplateHtml.html());
    }
  },

  bindImagePannelEvent: function () {
    $('.small-sub-image-pannel').on('afterChange', function (event, slick, currentSlide, nextSlide) {
      $('.big-sub-image').attr('src', $('.small-sub-image-pannel .slick-current img').attr('src'));
    });
  },

  bindGoodItemsEvent: function () {
    $('.similar-good-wrapper').on('click', '.good-item', function () {
      window.open($(this).attr('data-src'));
    });
  },

  bindCountEvent : function () {
    $('.count-input').on('change', function () {
      var value = parseInt($('.count-input').val());
      $(this).val(restrain(value));
    })
    $('.minus-btn').click(function () {
      var value = parseInt($('.count-input').val());
      $('.count-input').val(restrain(value - 1));
    });
    $('.plus-btn').click(function () {
      var value = parseInt($('.count-input').val());
      $('.count-input').val(restrain(value + 1));
    });

    function restrain(value) {
      if (value < 1) {
        return 1
      };
      if (value > 1000) {
        return 1000;
      }
      return value;
    }
  },

  bindCartEvent : function () {
    var id = _common_util.getQueryVariable('id');
    $('.add-cart-btn').on('click', function () {
      _carousel_service.addOne(
        id,
        function () {
          $('.toast-wrapper').html($('<div class="toast-item toast-green">加入购物车成功</div>'));
          setTimeout(function () {
            $('.toast-wrapper').html($(''));
          }, 2000);
        },
        function () {

        }
      )
    });
  }

}

$(function () {
  var id = _common_util.getQueryVariable('id');
  page.init(id);
});